<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1190625_m3wxzcfcc89.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/config.css">
    <title>Document</title>
    <style>
        html,body{
            background-color: #FAFAFE;
        }
        .header{
            z-index: 100;
            border-bottom: 1px solid #F2F2F2;
        }
        .header .fr{
            font-size: .14rem;
            color: #333;
        }
        .item{
            width: 100%;
            overflow: hidden;
            padding-left: .14rem;
            margin-top: .1rem;
        }
        .item .gds{
            width: 3.47rem;
            height: 1.12rem;
            background-color: #fff;
            padding: 0 .14rem;
            position: relative;

            transform: translateX(-0.18rem);
        }
        .item .gds img{
            width: .82rem;
            height: .82rem;
            border-radius: .03rem;
        }
        .item .gds .right{
            width: 2.18rem;
            height: .82rem;
        }
        .item .gds .right .desc{
            width: 100%;
            height: .3rem;
            line-height: .15rem;
            font-size: .12rem;
            color: #333;
        }
        .item .gds .right .guige{
            width: 100%;
            text-align: left;
            font-size: .14rem;
            color: #999;
        }
        .item .gds .right .price{
            width: 100%;
            text-align: left;
            font-size: .14rem;
            font-weight: bold;
            position: relative;
            top: .02rem;
        }
        .item .gds .right .price span{
            display: inline;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .item .select_check{
            width: .2rem;
            height: .2rem;
            border-radius: 50%;
            transform: translateX(-0.35rem);
            border: 1px solid #333C3C;
        }
        .item .select_check i{
            display: none;
        }
        .item .active{
            border: 1px solid #9C53F6;
        }
        .item .active i{
            display:block;
            font-size: .24rem;
            position: relative;
            left: -0.03rem;
            top: -0.04rem;
            color: #9C53F6;
        }
        .check_move{
            transition: 1s;
            transform: translateX(0.15rem)!important;
        }
        .startmove{
            transition: 1s;
            transform: translateX(0.25rem)!important;
        }
        .startmove .right{
            width: 2.1rem!important;
            padding-right: .1rem;
        }
        footer{
            width: 100%;
            height: .44rem;
            position: fixed;
            bottom: 0;
            background-color: #fff;
        }
        footer .wancheng{
            width: 50%;
            height: 100%;
            float: left;
            text-align: center;
            line-height: .44rem;
            font-size: .16rem;
            color: #999;
            font-weight: bold;
        }
        footer .delete{
            width: 50%;
            height: 100%;
            float: left;
            text-align: center;
            line-height: .44rem;
            font-size: .16rem;
            color: #fff;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <header class="header mui-bar mui-bar-nav flex align-items space-between">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">商品收藏</h1>
        <span class="allcheck fr">编辑</span>
    </header>
    <div class="main">
        <div class="item flex flex_start align-items">
            <div class="select_check">
                <i class="iconfont icon-round_check_fill"></i>
            </div>
            <div class="gds flex align-items space-between">
                <img src="../../image/goods_01.png">
                <div class="right flex flex_wrap align-contetn-streach">
                    <div class="desc ellipsis2">五星级酒店专用经典床上用品四件套纯棉品质可定制五星级酒店专用经典床上用品四件套纯棉品质可定制五星级酒店专用经典床上用品四件套纯棉品质可定制</div>
                    <div class="guige">粉色#401</div>
                    <div class="price app-price-Color"><span>￥1560</span></div>
                </div>
            </div>
        </div>
        <div class="item flex flex_start align-items">
            <div class="select_check">
                <i class="iconfont icon-round_check_fill"></i>
            </div>
            <div class="gds flex align-items space-between">
                <img src="../../image/goods_01.png">
                <div class="right flex flex_wrap align-contetn-streach">
                    <div class="desc ellipsis2">五星级酒店专用经典床上用品四件套纯棉品质可定制五星级酒店专用经典床上用品四件套纯棉品质可定制五星级酒店专用经典床上用品四件套纯棉品质可定制</div>
                    <div class="guige">粉色#401</div>
                    <div class="price app-price-Color"><span>￥1560</span></div>
                </div>
            </div>
        </div>
        <div class="item flex flex_start align-items">
            <div class="select_check">
                <i class="iconfont icon-round_check_fill"></i>
            </div>
            <div class="gds flex align-items space-between">
                <img src="../../image/goods_01.png">
                <div class="right flex flex_wrap align-contetn-streach">
                    <div class="desc ellipsis2">五星级酒店专用经典床上用品四件套纯棉品质可定制五星级酒店专用经典床上用品四件套纯棉品质可定制五星级酒店专用经典床上用品四件套纯棉品质可定制</div>
                    <div class="guige">粉色#401</div>
                    <div class="price app-price-Color"><span>￥1560</span></div>
                </div>
            </div>
        </div>
        <div class="item flex flex_start align-items">
            <div class="select_check">
                <i class="iconfont icon-round_check_fill"></i>
            </div>
            <div class="gds flex align-items space-between">
                <img src="../../image/goods_01.png">
                <div class="right flex flex_wrap align-contetn-streach">
                    <div class="desc ellipsis2">五星级酒店专用经典床上用品四件套纯棉品质可定制五星级酒店专用经典床上用品四件套纯棉品质可定制五星级酒店专用经典床上用品四件套纯棉品质可定制</div>
                    <div class="guige">粉色#401</div>
                    <div class="price app-price-Color"><span>￥1560</span></div>
                </div>
            </div>
        </div>
    </div>
    <footer style="display:none">
        <div class="wancheng">完成</div>
        <div class="delete app-bg-color">删除</div>
    </footer>
</body>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script src="../../js/common.js"></script>
<script>
    $(document).ready(function(){
        function getCollectList(){
            ajax('/api/goods/get_user_collect_goods',{start:0},function(){
                if (res.code == 1) {
                    
                }
            })
        }
        $(document).on('click','.slidebar .item',function(){
            $(this).addClass('sildebar-active').siblings().removeClass('sildebar-active')
        })
        $('.select_check').click(function(e){
            e.stopPropagation()
            $(this).hasClass('active') ? $(this).removeClass('active') : $(this).addClass('active')
        })
        $('.item').click(function(){
            var dom = $(this).find('.select_check');
            dom.hasClass('active') ? dom.removeClass('active') : dom.addClass('active')
        })
        //@删除
        $('.delete').click(function(){
            $('.item').each(function(){
                if ($(this).find('.select_check').hasClass('active')) {
                    $(this).remove()
                }
            })
            closeEdit()
        })
        //@click 点击编辑
        $('.allcheck').click(function(){
            if ($(this).html()  == "全选") {
                $('.item').each(function(){
                    $(this).find('.select_check').addClass('active')
                })
            }else{
                openEdit()
            }
        })
        //@click 关闭编辑
        $('.wancheng').click(function(){
            closeEdit()
        })
        //打开编辑
        function openEdit(){
            if ($('.item').length == 0) {
                alert('没有商品，赶紧去看看')
                return false
            }
            $('.allcheck').html('全选')
            $('footer').fadeIn()
            $('.item .select_check').addClass('check_move')
            $('.item .gds').addClass('startmove')
        }
        function closeEdit(){
            $('.allcheck').html('编辑')
            $('footer').fadeOut()
            $('.item .select_check').removeClass('check_move')
            $('.item .gds').removeClass('startmove')
        }
    })
    
</script>
</html>